<template>
	<view class="container">
	 <view class="l-head">
		 <image src="../../static/shop.png" mode="aspectFill"></image>
	     <text>JYShop</text>
	 </view>
 
		<view class="loginbox">
			      
			<view class="inputbox"> 
	    		 <view class="lab">手机号</view>
				<uni-easyinput class="inputbox" placeholder="请输入手机号" v-model="mobile" ></uni-easyinput>
			</view>
			 <view class="inputbox"> 
				 <view class="lab">密 码</view>
	         <uni-easyinput class="inputbox" type="password"   placeholder="请输入密码" v-model="password"></uni-easyinput>
			</view>
			<view  class="inputbox">
				<view class="lab">验证码</view>
				<view class="inputbox"><uni-easyinput v-model="safecode" placeholder="请输入验证码" ></uni-easyinput>
				<text class="sendbtn" @click="sendsms">{{smsbtn}}</text></view>
			</view>
	 
			 <text class="login-btn" @click="reg">修改密码</text>
		 
			 
		</view>
		
 
		 
	</view>
</template>

<script>
	 
	
	export default{
		data(){
			return {
				mobile: '',
				password: '',
				 safecode:"",
				smsbtn:"获取验证码",
				smsbtn_status:true
			}
		},
		onLoad(){
			
		},
		methods: {
			reg(){
				let params={
					mobile:this.mobile,
					password:this.password,
					smscode:this.safecode
				};
				if(!this.mobile || !this.password || !this.safecode){
					uni.showToast({
						title:"请填写完整内容"
					});
					return ;
				}
				let that = this;
				this.$util.req("/user/forgetpassword",params,false,function(res){
					//that.$util.setToken(res.data.token);
					that.$util.toast("修改成功",function(){
							uni.navigateTo({
								url:"/pages/public/login"
							}); 
					},1000);
				
				});
			},
			sendsms(){
				 
				if(!this.mobile){
					uni.showToast({
						title:"请输入手机号"
					});
					return ;
				}
				if(!this.smsbtn_status){
					return ;
				}
				console.log("下发短信");
				let that = this;
				//请求接口
				this.$util.req("/user/sendsms",{"smstype":"reg","mobile":this.mobile},false,function(res){
			  	  uni.showToast({
			  	  	title:"发送成功"
			  	  });
				   console.log("下发成功");
				   that.smsbtn_status = false;
				   let maxsec=60;//60秒
					//倒计时
					let timeoutID = setInterval(function(){
						
						maxsec = maxsec-1;
						that.smsbtn=maxsec+"秒";
						
						if(maxsec==0){
							console.log("清楚定时器");
							that.smsbtn_status=true;
							that.smsbtn="获取验证码";
							clearInterval(timeoutID);
						}
					},1000);
					
				});
			} 
		 
		},

	}
</script>

<style lang='scss'>
	page{
		background: #FFFFFF;
	}
	.container{
		color: $font-color-dark;
		display: flex;
	    
		flex-direction: column;
		width: 100%;
		height: 100vh;
	}
	.auth{
		display: flex;
		justify-content: center;
		margin-top: 60upx;
		.auth-item{
			margin: 0 10upx;
			font-size: $font-sm;
			display: flex;
			justify-content: center;
			flex-direction: column;
		}
	
	}
   .l-head{
	   display: flex;
	   margin-top: 30%;
	   justify-content: center;
	   align-items: center;
	   flex-direction: column;
	   
	   margin-bottom: 20upx;
	   image{
		   width: 200upx;
		   height: 200upx;
	   }
   }
   .loginbox{
	  display: flex;
	  flex-direction: column;
	  padding: 0 40upx;
	  align-items: center;
	  .sendbtn{
	  	margin-left: 10upx;
	  	color: $font-color-base;
	  	border: 1px solid $border-color-base;
	  	padding: 10upx  ;
	  }
	   .inputbox{
		   width: 100%;
		   margin: 10upx;
		   display: flex;
           align-items: baseline;
		   .lab{
			   text-align: right;
		   		 width: 100upx;
		   }
		   .inputbox{
			    flex:1; 
		   }
		  
	   }
	   .login-btn{
		   margin-top: 20upx;
		   padding: 20upx 100upx;
		   background-color: #FF5A5F;
		   color: #FFFFFF;
		   
	   }
	   .regtxt{
		   margin-top: 20upx;
		   padding: 0 20upx;
		   font-size: $font-base;
		   color: $font-color-dark;
		   width: 100%;
		   
		display: flex;
		justify-content: space-between;
		}
   }
   
	 
</style>
